<!--
 * @Description:应用入口组件
 * @Author: zhailei
 * @Date: 2021-06-02 13:38:08
 * @LastEditTime: 2021-08-06 13:47:11
 * 
 * @FilePath: \vite-demoe:\wwwroot\Vue\\-cloud-vue\src\App.vue
-->
<template>
  <a-config-provider :locale="locale">
    <router-view />
  </a-config-provider>
</template>

<script>
import { enquireScreen } from "./utils/util";
import { mapState, mapGetters, mapMutations } from "vuex";
import themeUtil from "@/utils/themeUtil";
import { getI18nKey } from "@/utils/routerUtil";
import zhCN from "ant-design-vue/lib/locale-provider/zh_CN";

export default {
  name: "App",
  data() {
    return {
      locale: {},
    };
  },
  created() {
    this.setLanguage(this.lang);
    enquireScreen((isMobile) => this.setDevice(isMobile));
    this.setDomain(document.domain);
  },
  mounted() {
    this.setWeekModeTheme(this.weekMode);
  },
  watch: {
    weekMode(val) {
      this.setWeekModeTheme(val);
    },
    lang(val) {
      this.setLanguage(val);
      this.setHtmlTitle();
    },
    $route() {
      this.setHtmlTitle();
    },
    "theme.mode": function(val) {
      if (val === "mix") {
        val = "light";
      }
      let closeMessage = this.$message.loading(
        `您选择了主题模式 ${val}, 正在切换...`
      );
      themeUtil.changeThemeColor(this.theme.color, val).then(closeMessage);
    },
    "theme.color": function(val) {
      let theme = this.theme.mode;
      if (this.theme.mode === "mix") {
        theme = "light";
      }
      let closeMessage = this.$message.loading(
        `您选择了主题色 ${val}, 正在切换...`
      );
      themeUtil.changeThemeColor(val, theme).then(closeMessage);
    },
  },
  computed: {
    ...mapState("setting", ["theme", "weekMode", "lang"]),
    ...mapGetters(["configData"]),
  },
  methods: {
    ...mapMutations("setting", ["setDevice", "setDomain"]),
    setLanguage(lang) {
      this.$i18n.locale = lang;
      //   this.getLanguageMap();
      this.locale = require("ant-design-vue/es/locale-provider/" + lang ||
        "zh_CN").default;
      // switch (lang) {
      //   case 'CN':
      //     this.locale = require('ant-design-vue/es/locale-provider/zh_CN').default
      //     break
      //   case 'HK':
      //     this.locale = require('ant-design-vue/es/locale-provider/zh_TW').default
      //     break
      //   case 'US':
      //   default:
      //     this.locale = require('ant-design-vue/es/locale-provider/en_US').default
      //     break
      // }
    },
    setWeekModeTheme(weekMode) {
      if (weekMode) {
        document.body.classList.add("week-mode");
      } else {
        document.body.classList.remove("week-mode");
      }
    },
    // 设置浏览器标题
    setHtmlTitle() {
      const route = this.$route;
      const key =
        route.meta &&
        typeof route.meta.title !== "undefined" &&
        route.meta.title;
      // document.title = this.$t(key) + " | " + process.env.VUE_APP_NAME;
      // document.title = process.env.VUE_APP_NAME;
      let index = this.configData.findIndex(
        (item) => item.code === "browserTitle"
      );
      if (index >= 0) {
        document.title = this.configData[index].value;
      } else {
        document.title = process.env.VUE_APP_NAME;
      }
    },
    // 获取多语言数据
    getLanguageMap() {
      this.$post("/system/sysLanguage/getLanguageMap").then((langRes) => {
        if (langRes.statusCode === 200) {
          let langData = langRes.data;
          this.$post("/system/sysLanguageConfig/selectAll").then((typeRes) => {
            let langTypeData = [];
            if (typeRes.statusCode === 200) {
              langTypeData = typeRes.data.map((e) => e.configValue);
            }
            let langTypeMap = {};
            for (let i = 0; i < langTypeData.length; i++) {
              let langDataMap = {};
              for (let key in langData) {
                if (key.indexOf("_" + langTypeData[i]) >= 0) {
                  langDataMap[key.replace("_" + langTypeData[i], "")] =
                    langData[key];
                  langTypeMap[langTypeData[i]] = langDataMap;
                }
              }
              this.$i18n.setLocaleMessage(
                langTypeData[i],
                langTypeMap[langTypeData[i]]
              );
            }
          });
        }
      });
    },
  },
};
</script>

<style lang="less">
#documentFile {
  height: 70vh;
}
#wps-iframe {
  height: 100%;
}
</style>
